<template>
  <view class="flash-sale">
    <view class="sale-header">
      <view class="left">
        <text class="title">限时秒杀</text>
        <text class="discount">低至4折</text>
      </view>
      <view class="countdown">
        <text>{{hours}}:{{minutes}}:{{seconds}}</text>
      </view>
      <view class="more">
        更多 >
      </view>
    </view>
    <scroll-view class="sale-list" scroll-x>
      <view class="sale-item" v-for="(item, index) in saleList" :key="index" @tap="onItemTap(item)">
        <image :src="item.image" mode="aspectFill"></image>
        <view class="info">
          <text class="name">{{item.name}}</text>
          <view class="price">
            <text class="current">¥{{item.price}}</text>
            <text class="discount">{{item.discount}}折</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const hours = ref('00')
const minutes = ref('00')
const seconds = ref('00')
let timer = null

const saleList = [
  {
    name: '赤摩·惊天烧鸟日料',
    image: '/static/images/food1.jpg',
    price: '118',
    discount: '4.4'
  },
  {
    name: '魏老爷自助烤肉',
    image: '/static/images/food2.jpg',
    price: '75',
    discount: '5.5'
  }
]

const updateCountdown = () => {
  // 这里可以根据实际需求设置倒计时逻辑
  const now = new Date()
  hours.value = String(23 - now.getHours()).padStart(2, '0')
  minutes.value = String(59 - now.getMinutes()).padStart(2, '0')
  seconds.value = String(59 - now.getSeconds()).padStart(2, '0')
}

onMounted(() => {
  updateCountdown()
  timer = setInterval(updateCountdown, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

const emit = defineEmits(['select'])

const onItemTap = (item) => {
  emit('select', item)
}
</script>

<style lang="scss" scoped>
.flash-sale {
  background: #fff;
  padding: 15px;
  
  .sale-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      
      .title {
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
      }
      
      .discount {
        color: #FF5722;
        font-size: 12px;
      }
    }
    
    .countdown {
      background: #FF5722;
      color: #fff;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .more {
      margin-left: 15px;
      color: #999;
      font-size: 12px;
    }
  }
  
  .sale-list {
    white-space: nowrap;
    
    .sale-item {
      display: inline-block;
      width: 150px;
      margin-right: 10px;
      
      image {
        width: 150px;
        height: 100px;
        border-radius: 8px;
      }
      
      .info {
        padding: 5px 0;
        
        .name {
          font-size: 14px;
          color: #333;
        }
        
        .price {
          margin-top: 5px;
          
          .current {
            color: #FF5722;
            font-size: 16px;
            font-weight: bold;
            margin-right: 5px;
          }
          
          .discount {
            color: #FF5722;
            font-size: 12px;
            padding: 2px 4px;
            background: rgba(255,87,34,0.1);
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style> 